﻿<!DOCTYPE html>
<html>
<head>
    <title>Slide-in When Scrolling</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="float-panel.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="demo2.css" rel="stylesheet" />
</head>
<body>
    <nav>
        <div class="float-panel" data-top="0" data-scroll="500">
            <div style="text-align:right;max-width:1360px;margin:0 auto;">
                <a href="#" style="float:left;">
                    <i class="fa fa-gg"></i>
                    <em style="font:bold 20px Verdana, Arial;letter-spacing:1px;">MENUCOOL</em>
                </a>
                <a href="#"><i class="fa fa-tint"></i> Free trial</a>
                <a href="#">Subscribe</a>
                <a href="#">Services</a>
                <a href="#"><i class="fa fa-search"></i></a>
            </div>
        </div>
    </nav>
    <section class="text-center" style="background:#679;">
        <a href="#"><img src="../float/imgs/about-us.gif" /></a>
    </section>

    <div id="wrapper">
        <section class="row">
            <div class="col-60">
                <h2>About Company Page</h2>
                <h4>Lorem ipsum dolor sit amet</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum ex eu metus rhoncus pulvinar. Ut vitae lorem nec magna dictum elementum.
                    Fusce libero arcu, porttitor sed arcu quis, maximus dignissim nisl. Aliquam ultrices nisl vel ligula pulvinar, eu hendrerit mauris ultrices.
                </p>
            </div>
            <div class="col-40 text-center">
                <i class="fa fa-bar-chart slideanim"></i>
            </div>
        </section>

        <section class="row bg-gray">
            <div class="col-40 text-center">
                <i class="fa fa-globe slideanim"></i>
            </div>
            <div class="col-60">
                <h2>Our Values</h2>
                <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
                <p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
            </div>
        </section>

        <section class="text-center">
            <h2>SERVICES</h2>
            <h4>What we offer</h4>
            <div class="row slideanim">
                <div class="col-33">
                    <i class="fa fa-heart"></i>
                    <h4>Heart</h4>
                    <p>Lorem ipsum dolor sit amet..</p>
                </div>
                <div class="col-33">
                    <i class="fa fa-pied-piper"></i>
                    <h4>PIED PIPER</h4>
                    <p>Lorem ipsum dolor sit amet..</p>
                </div>
                <div class="col-33">
                    <i class="fa fa-university"></i>
                    <h4>UNIVERSITY</h4>
                    <p>Lorem ipsum dolor sit amet..</p>
                </div>
            </div>
            <br><br>
            <div class="row slideanim">
                <div class="col-33">
                    <i class="fa fa-child"></i>
                    <h4>CHILD</h4>
                    <p>Lorem ipsum dolor sit amet..</p>
                </div>
                <div class="col-33">
                    <i class="fa fa-compass"></i>
                    <h4>COMPASS</h4>
                    <p>Lorem ipsum dolor sit amet..</p>
                </div>
                <div class="col-33">
                    <i class="fa fa-area-chart"></i>
                    <h4>AREA CHART</h4>
                    <p>Lorem ipsum dolor sit amet..</p>
                </div>
            </div>
        </section>

        <section class="text-center bg-gray">
            <h2>Responsive Image Grid</h2>
            <h4>What we have created</h4>
            <ul id="rig">
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 0;"></span>
                        <h3>Responsive Grid</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 6.66%;"></span>
                        <h3>Ninja Slider</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 20%;"></span>
                        <h3>JS Image Slider</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 26.66%;"></span>
                        <h3>jQuery Slider</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 33.33%;"></span>
                        <h3>Dropdown Menu</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 80%;"></span>
                        <h3>Tabbed Menu</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 93.333%;"></span>
                        <h3>Vertical Menu</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 53.33%;"></span>
                        <h3>Accordion Menu</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 66.6667%;"></span>
                        <h3>CSS Tooltip</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 60%;"></span>
                        <h3>JavaScript Tooltip</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 40%;"></span>
                        <h3>Tabbed Content</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 86.667%;"></span>
                        <h3>Color Picker</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 73.34%;"></span>
                        <h3>Super Panel</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 46.666%;"></span>
                        <h3>Float Panel</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 13.333%;"></span>
                        <h3>Back-to-Top Arrow</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
                <li class="slideanim">
                    <a class="rig-cell" href="#">
                        <span class="rig-img" style="background-position:0 100%;"></span>
                        <h3>Filter Selects</h3>
                        <span class="rig-overlay"></span>
                    </a>
                </li>
            </ul>
        </section>
    </div>


    <footer class="text-center">
        <p>Designed by <a href="http://www.menucool.com/" title="Web UI components" style="color:#818181;">www.menucool.com</a></p>
    </footer>
</body>
</html>
